<template>
	<!-- 货品维护 -->
	<div>
		<headpage username="货品维护" routername="main1"></headpage>
		<ul class="list">
			<li>
				<input class="form-control" type="text" placeholder="全部类别">
			</li>
			<li>
				<input class="form-control" type="text" placeholder="名称/条形码/编号">
			</li>
		</ul>
		<ul>
			<li>
				<ul class="list">
					<li>编号</li>
					<li>名称</li>
					<li>价格</li>
					<li>数量</li>
				</ul>
			</li>
			<li v-for="(item,index) in lists" :key="index">

				<ul class="list">
					<li>{{item.one}}</li>
					<li>{{item.two}}</li>
					<li>{{item.three}}</li>
					<!-- 循环中的v-model绑定  动态变化 -->
					<li><input type="number" class="form-control" v-model="item.four"></li>
				</ul>
			</li>
		</ul>
		<div class="price">
			合计:{{totalprice}}
			<button class="btn btn-info btn-sm" style="position: absolute;right:5px;" @click="emit">提交</button>
		</div>

		<div class="foot">
			<ul class="list">
				<li>货品设置</li>
				<li>新增货品</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import headpage from "../headpage.vue";
	export default {
		name: "goods_maintenance",
		components: {
			headpage
		},
		data() {
			return {
				lists: [{
						one: 1,
						two: "特仑苏",
						three: 100,
						four: 0
					},
					{
						one: 2,
						two: "纯甄",
						three: 120,
						four: 0
					},
					{
						one: 3,
						two: "安慕希",
						three: 40,
						four: 0
					},
					{
						one: 4,
						two: "莫斯利安",
						three: 70,
						four: 0
					},
					{
						one: 5,
						two: "优酸乳",
						three: 50,
						four: 0
					}
				],
			}
		},
		computed: {
			totalprice() {
				var k = 0
				for (var i = 0; i < this.lists.length; i++) {
					k += this.lists[i].three * this.lists[i].four
				}
				//配置规则集  根据购买金额进行不同的打折
				if(k>100&&k<=300)
				{
				   k=k*0.9
				}
				else if(k>300&&k<=650)
				{
					k=k*0.85
				}
				else if(k>650&&k<=1000)
				{
					k=k*0.8
				}
				else if(k>=1000){
					k=k*0.75
				}
				return k
			}
		},
    methods:{
      emit(){
        if(this.totalprice!=0){
          var obj={
            xs:this.totalprice,
            sy:this.totalprice*0.1
          }
          window.localStorage.setItem("money",JSON.stringify(obj))
          alert("提交成功")
        }
        else{
          alert("请选择商品")
        }
      }
    }
	}
</script>

<style scoped="scoped">
	ul,
	li,
	p {
		margin: 0;
		padding: 0;
		list-style: none;
		text-align: center;
	}

	.list {
		display: flex;
		border-bottom: 1px solid lightblue;
	}

	.list li {
		width: 50%;
		margin: 5px;
		text-align: center;
	}

	.list li:hover {
		background-color: lightblue;
		color: white;
	}

	.foot {
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.foot ul li {
		margin-left: 30px;
		margin-right: 30px;
	}

	.price {
		background-color: lightblue;
		color: white;
		font-size: 16px;
		margin-top: 20px;
		padding: 5px;
	}
</style>
